<template>
  <div style="height: 100%">
    <div class="text-div">
      <textarea
        class="text-area"
        placeholder="记录你的灵感..."
        v-model="commentText"
      ></textarea>
    </div>
    <div class="text-div">
      <a-upload
        v-model:file-list="fileList"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        list-type="picture-card"
        accept="image/*"
        @preview="handlePreview"
      >
        <div v-if="fileList.length < 16">
          <!-- <plus-outlined /> -->
          <img style="height: 20px" src="../../assets/plus.png" alt="" />
          <div style="font-size: 13px">Upload</div>
        </div>
      </a-upload>
      <a-modal
        :visible="previewVisible"
        :title="previewTitle"
        :footer="null"
        @cancel="handleCancel"
      >
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
    </div>
    <div
      style="
        height: 1px;
        width: 86%;
        margin: 10px 0 10px 7%;
        background-color: #ddd;
      "
    ></div>
    <!-- <input type="file" class="inputBtn" @change="addForum" /> -->
    <div class="text-div">
      <button v-if="haveContent" class="button" @click="addForum">发布</button>
      <button v-else class="disableButton" @click="addForum" disabled>
        发布
      </button>
    </div>
  </div>
</template>

<script>
// import { PlusOutlined } from "@ant-design/icons-vue";
// import { defineComponent, ref } from "vue";
import { ref } from "vue";
import { message } from "ant-design-vue";

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = () => resolve(reader.result);

    reader.onerror = (error) => reject(error);
  });
}

export default {
  name: "Writing",
  data() {
    return {
      uid: this.$store.state.id,
      commentText: "",
      haveContent: false,
    };
  },
  setup() {
    const previewVisible = ref(false);
    const previewImage = ref("");
    const previewTitle = ref("");
    const fileList = ref([]);

    const handleCancel = () => {
      previewVisible.value = false;
      previewTitle.value = "";
    };

    const handlePreview = async (file) => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }

      previewImage.value = file.url || file.preview;
      previewVisible.value = true;
      previewTitle.value =
        file.name || file.url.substring(file.url.lastIndexOf("/") + 1);

      console.log(
        "选择文件-----------------------------------------------------------"
      );
      console.log(previewImage.value);
      console.log(previewVisible.value);
      console.log(previewTitle.value);
    };

    return {
      previewVisible,
      previewImage,
      fileList,
      handleCancel,
      handlePreview,
      previewTitle,
    };
  },
  methods: {
    async addForum() {
      try {
        let uid = this.uid;
        let dynamic = {
          uid: uid,
          dynamicContent: this.commentText,
        };
        let res = await this.$axios.post("/dynamic/add", dynamic);
        let newDynamic = res.data.data;
        console.log("新动态---", newDynamic);
        let did = newDynamic.id;

        let formData = new FormData();
        for (let i = 0; i < this.fileList.length; i++) {
          formData.append("imgs", this.fileList[i].originFileObj);
        }
        formData.append("id", did);
        // console.log(formData.get("id"));
        // console.log(formData.get("imgs"));

        let img_res = await this.$axios.post("/dynamic/uploadImgs", formData);
        console.log(img_res);
        let s_did = newDynamic.id;
        let newres = await this.$axios.get(
          "/dynamic/selectOneById?id=" + s_did
        );
        console.log("请求的动态---", newres.data.data);
        this.$emit("tellFather", { newForum: newres.data.data });
        message.success("发布成功");
        this.commentText = "";
        this.fileList = ref([]);
      } catch (error) {
        console.log(error);
      }
    },
  },
  watch: {
    fileList() {
      if (
        this.commentText.replace(/^\s+|\s+$/g, "") == "" &&
        this.fileList.length == 0
      ) {
        this.haveContent = false;
      } else {
        this.haveContent = true;
      }
    },
    commentText() {
      if (
        this.commentText.replace(/^\s+|\s+$/g, "") == "" &&
        this.fileList.length == 0
      ) {
        this.haveContent = false;
      } else {
        this.haveContent = true;
      }
    },
  },
};
</script>
<style scoped>
.text-div {
  margin-left: 10%;
}
.text-area {
  border: none;
  min-height: 100px;
  width: 85%;
  font-size: 13px;
}
.button {
  padding: 5.5px 20px;
  color: #ffffff;
  background-color: #06f;
  border: none;
  font-size: 13px;
  border-radius: 3px;
  width: 87%;
  margin-bottom: 10px;
}
.disableButton {
  padding: 5.5px 20px;
  color: #999;
  background-color: #eee;
  border: none;
  font-size: 13px;
  border-radius: 3px;
  width: 87%;
  margin-bottom: 10px;
}
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}

:deep
  .ant-upload-list-item.ant-upload-list-item-done.ant-upload-list-item-list-type-picture-card {
  border: none;
  padding: 0;
}

:deep .ant-upload-list-picture-card-container {
  width: 72px;
  height: 72px;
}
/* ::v-deep .ant-upload-list-item-info {
  height: ;
} */

:deep .ant-upload.ant-upload-select.ant-upload-select-picture-card {
  width: 72px;
  height: 72px;
}
</style>
